<template>
	<div id="login">
		<img class="logo" :src="logo" alt="">
		<el-form ref="form" :rules="rules" :model="form">
			<el-form-item class="auth-line" prop="phone">
				<auth-input @focus="focus" @blur="blur" icon="icon-shouji" v-model="form.phone" placeholder="请输入手机号码"></auth-input>
			</el-form-item>

			<el-form-item class="auth-line" prop="password">
				<auth-input @focus="focus" @blur="blur" icon="icon-mima" type="password" v-model="form.password" placeholder="请输入您的密码"></auth-input>
			</el-form-item>

			<button type="button" class="btn btn-rect auth-btn" @click="login">立即登录</button>

		</el-form>
		<div class="auth-line auth-links">
			<router-link to="register" tag="div" class="pull-left">
				注册账号
			</router-link>
			<router-link to="forgot" tag="div" class="pull-right">
				忘记密码？
			</router-link>
		</div>
		<div class="bottom-margin"></div>
		<div :class="'footer ' + footerClass">
			<i @click="playVideo" class="iconfont icon-bofang"></i>
			<h5>了解您所不知道的日出行</h5>
			<p><small>官方宣传片正式上线，点击查看详情</small></p>
		</div>

		<div v-show="play" class="modal">
			<i @click="closeVideo" class="iconfont icon-chacha"></i>
			<div class="dialog">
				<video controls="true" ref="video" :src="video" preload="none">

				</video>
			</div>
		</div>
	</div>
</template>

<script>
import api from '~/api/api.js';
import AuthInput from '~/components/AuthInput.vue';

export default {
	name: 'login',
	components: {
		AuthInput
	},
	created () {
		api.get('/config/get_for_login')
		.then((data) => {
			this.video = data.data.video.value;
			this.logo = data.data.logo.value;
		})
	},
	data () {
		return {
			logo: '',
			video: '',
			footerClass: '',
			play: false, // 播放视频
			form: {
				phone: '',
				password: '',
			},
			rules: {
				phone: [
					{ required: true, message: '请输入手机号'},
					{ pattern: /^[0-9]+$/, message: '请输入正确的手机号码', trigger: 'blur'}
				],
				password: [
					{required: true, message: '请输入密码', trigger: 'blur'},
					{min: 6, message: '密码不能小于六位', trigger: 'blur'}
				]
			},
			errorMsg: '',
			dialogVisible: false,
		}
	},
	methods : {
		// 输入框获得焦点
		focus () {
			this.footerClass = 'hidden';
		},
		// 输入狂诗曲焦点
		blur () {
			this.footerClass = '';
		},
		// 登录操作
		login () {
			this.$refs['form'].validate(valid => {
				if (!valid) {
					return;
				}
				this.$store.dispatch('login', this.form)
				.then(response => {
					this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect : '/');
				})
				.catch(error => {
					this.$message.error(error.message);
				});
			});
		},
		// 播放video
		playVideo () {
			this.play = true;
			this.$refs.video.play();
		},
		// 停止播放video
		closeVideo () {
			this.play = false;
			this.$refs.video.pause();
		}
	}
}
</script>

<style scoped>
#login {
	padding-top: 1px;
	height: 100%;
}

.logo {
	display: block;
	margin: 45px auto;
	width: 136px;
	height: 136px;
}

.footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	padding: 0 10px;
	opacity: 0.8;
	background-color: #fff;
	box-sizing: border-box;
}

.footer .icon-bofang {
	color: #b20f0a;
	font-size: 40px;
	float: right;
	margin-top: 15px;
	margin-right: 15px;
}

.modal {
	position: fixed;
	top: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0 , .8);
}

.dialog {
	margin-top: 150px;
	background-color: #fff;
	position: relative;
}

.modal .icon-chacha {
	margin-right: 5px;
	color: #fff;
	font-size: 25px;
	position: absolute;
	left: 10px;
	top: 5px;
	z-index: 999;
}

.modal video {
	width: 100%;
}
</style>
